<template>
  <div class="admin-layout">
    <div class="admin-sidebar">
      <div class="sidebar-header">
        <h2>管理后台</h2>
      </div>
      <nav class="sidebar-nav">
        <router-link 
          to="/admin/problems" 
          class="nav-item"
          :class="{ active: $route.path === '/admin/problems' }"
        >
          <div class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
              <path d="M13 2v7h7" />
            </svg>
          </div>
          <span>题目管理</span>
        </router-link>
        <router-link 
          to="/admin/users" 
          class="nav-item"
          :class="{ active: $route.path === '/admin/users' }"
        >
          <div class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
              <circle cx="12" cy="7" r="4" />
            </svg>
          </div>
          <span>用户管理</span>
        </router-link>
      </nav>
    </div>
    <div class="admin-content">
      <div class="content-header">
        <h1>{{ getPageTitle }}</h1>
      </div>
      <div class="content-body">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import '@/styles/admin/layout.css'
import '@/styles/admin/transitions.css'

const route = useRoute()

const getPageTitle = computed(() => {
  const titles: Record<string, string> = {
    '/admin/problems': '题目管理',
    '/admin/users': '用户管理'
  }
  return titles[route.path] || '管理后台'
})
</script>
